<template>
	<view class="container">
		<view class="section-text">自定义颜色demo</view>
		<es-filter-bar :list="list" @change="onChange" @close="onClose" ></es-filter-bar>
		<es-filter-bar :list="list" @change="onChange" @close="onClose" activeBg="hotpink"></es-filter-bar>
		<view class="bg-wrapper" >
			<es-filter-bar :list="list" @change="onChange" @close="onClose" btnBg="#ffffff"></es-filter-bar>
		</view>
		
		<view class="section-text">地区选择demo</view>
		<es-filter-bar :list="areaList" @change="onChange" @close="onClose" ></es-filter-bar>
		
		<view class="section-text">下拉选择demo</view>
		<es-filter-bar :list="selectList" @change="onChange" @close="onClose" ></es-filter-bar>
		
	</view>
</template>

<script>
	// import esFilterBar from "/components/es-filter-bar/es-filter-bar";
	
	const sortOptions = [{
			value: '',
			label: '综合'
		},
		{
			value: 'distance',
			label: '距离最近'
		},
		{
			value: 'hot',
			label: '人气最高'
		},
		{
			value: 'sales',
			label: '销量最高'
		},
		{
			value: 'price',
			label: '价格最低'
		}
	];

	const finenessOptions = [{
			value: "全新",
			label: "全新"
		}, {
			value: "几乎全新",
			label: "几乎全新"
		}, {
			value: "轻微使用痕迹",
			label: "轻微使用痕迹"
		}, {
			value: "明显使用痕迹",
			label: "明显使用痕迹"
		},
	];

	const countryOptions = [{
			value: "CHN",
			label: "中国",
			img: "/static/images/country/CHN.png"
		},
		{
			value: "KOR",
			label: "韩国",
			img: "/static/images/country/KOR.png"
		},
		{
			value: "JPN",
			label: "日本",
			img: "/static/images/country/JPN.png"
		},
		{
			value: "CMR",
			label: "CMR",
			img: "/static/images/country/CMR.png"
		},
		{
			value: "CRO",
			label: "CRO",
			img: "/static/images/country/CRO.png"
		},
		{
			value: "CUB",
			label: "CUB",
			img: "/static/images/country/CUB.png"
		},
		{
			value: "CZE",
			label: "CZE",
			img: "/static/images/country/CZE.png"
		},
		{
			value: "DEN",
			label: "DEN",
			img: "/static/images/country/DEN.png"
		},
		{
			value: "ECU",
			label: "ECU",
			img: "/static/images/country/ECU.png"
		},
		{
			value: "EGY",
			label: "EGY",
			img: "/static/images/country/EGY.png"
		},
		{
			value: "ENG",
			label: "ENG",
			img: "/static/images/country/ENG.png"
		},
		{
			value: "GER",
			label: "GER",
			img: "/static/images/country/GER.png"
		},
		{
			value: "HUN",
			label: "HUN",
			img: "/static/images/country/HUN.png"
		},
		{
			value: "FRA",
			label: "FRA",
			img: "/static/images/country/FRA.png"
		}
	];

	export default {
		components: {
			// esFilterBar
		},
		data() {
			return {
				list: [
					//综合排序
					{
						field: 'sortBy',
						type: 'select',
						name: '综合',
						options: sortOptions,
						label: '',
						value: null
					},
					//地区-开启定位并指定默认城市
					{
						field: 'city',
						type: 'area',
						name: '城市',
						label: '深圳',
						value: {
							province: '广东',
							city: '深圳'
						},
						enableLocation: true
					},
					//普通按钮
					{
						field: 'latest',
						type: 'button',
						name: '最新发布',
						label: '',
						value: null
					},
					//下拉选择-多选-两列-图标
					{
						field: 'country',
						type: 'select',
						name: '国家',
						options: countryOptions,
						column: 2,
						multiple: true,
						label: '',
						value: null
					},
				],
				areaList: [
					//地区-禁用定位功能
					{
						field: 'area',
						type: 'area',
						name: '地区',
						height:'500rpx',
						label: '',
						value: null,
						enableLocation: false
					},
					//地区-开启定位并指定默认城市
					{
						field: 'city',
						type: 'area',
						name: '城市',
						height:'500rpx',
						label: '深圳',
						value: {
							province: '广东',
							city: '深圳'
						},
						enableLocation: true
					},
				],
				selectList: [
					//综合排序
					{
						field: 'sortBy',
						type: 'select',
						name: '综合',
						options: sortOptions,
						label: '',
						value: null
					},
					//下拉选择-单选-两列
					{
						field: 'fineness',
						type: 'select',
						name: '成色',
						options: finenessOptions,
						column: 1,
						multiple: true,
						height: '360rpx',
						label: '',
						value: null
					},
					//下拉选择-多选-两列-图标
					{
						field: 'country',
						type: 'select',
						name: '国家',
						options: countryOptions,
						column: 2,
						multiple: true,
						label: '',
						value: null
					},
				],
			}
		},
		methods: {
			onChange(filterList) {
				console.log(filterList)
				//todo 根据接口请求参数dto封装请求参数
				// {
				// 	 key:value
				// }
			},
			onClose(e) {
				
			}
		},
		onShareTimeline() {
			return {
				title: '组件-条件筛选栏',
				imageUrl: "/static/images/logo.png",
			}
		},
		onShareAppMessage() {
			return {
				title: '组件-条件筛选栏',
				imageUrl: "/static/images/logo.png",
			}
		},
	}
</script>

<style scoped>
	.container {
		width: 750rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffffff;
	}
	.mt30{
		margin-top: 30rpx;
	}
	.bg-wrapper{
		background-color: #f6f8fb;
		width:750rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
	}
	.section-text{
		width: 750rpx;
		padding: 30rpx;
		font-size: 26rpx;
		color: #B6B6B6;
		box-sizing: border-box;
	}
</style>